﻿
@{
    ViewBag.Title = "注册";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<el-col :span="6" :offset="9" v-loading="loading" element-loading-text="拼命注册中">
    <el-card class="box-card loginbox">
        <div style="margin:25px 0">注册账号</div>
        <el-form status-icon class="demo-ruleForm">
            <el-form-item prop="name">
                <el-input v-model="formData.email" maxlength=30 placeholder="请输入注册邮箱">
                    <template slot="prepend">
                        邮&nbsp;&nbsp;&nbsp;箱
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="formData.password" maxlength=18 placeholder="请输入注册密码" auto-complete="off">
                    <template slot="prepend">
                        密&nbsp;&nbsp;&nbsp;码
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="code" style="text-align:left;">
                <el-input type="valicode" v-model="formData.code" style="width:58%" maxlength=6 placeholder="请输入邮箱验证码" auto-complete="off">
                    <template slot="prepend">
                        验证码
                    </template>
                </el-input>
                <el-button :loading="sendLoading" :disabled="sendDisabled" @@click="sendvalicode()">{{btnSendCode}}</el-button>
            </el-form-item>
            <el-button type="primary" :loading="loging" style="width:100%" @@click="register()">立即注册</el-button>
        </el-form>
    </el-card>
</el-col>

@section scripts{
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                limit: 10,
                ismultiple: false,
                isshowfilelist: true,
                activeIndex: '6',
                loging: false,
                sendLoading: false,
                loading: false,
                countdown: 60,
                sendDisabled: false,
                btnSendCode: '获取验证码',
                formData: {
                    email: '',
                    password: '',
                    code: ''
                }
            },
            methods: {
                handleSelect(key, keyPath) {
                    var self = this;
                    skipPage(self, key);
                },
                //发送验证码
                sendvalicode() {
                    var self = this;
                    self.sendLoading = true;
                    if (self.formData.email == '') {
                        self.sendLoading = false;
                        showMessage(self, '提示：注册邮箱为空.', true, 'warning');
                        return;
                    }
                    Axios.post(self, '/main/sendRegisterCode', {
                        loading: false,
                        data: {
                            email: self.formData.email
                        },
                        success(res) {
                            showMessage(self, res.msg, true);
                            self.setIntervalTip();
                        },
                        error(res) {
                            showMessage(self, res.msg);
                        }
                    });
                    self.sendLoading = false;
                },
                //发送验证码文字跳动
                setIntervalTip() {
                    var self = this;
                    if (self.countdown == 0) {
                        self.sendDisabled = false;
                        self.btnSendCode = "获取验证码";
                        self.countdown = 60;
                        return false;
                    } else {
                        self.sendDisabled = true;
                        self.btnSendCode = "重新发送(" + self.countdown + ")";
                        self.countdown--;
                    }
                    setTimeout(function () {
                        self.setIntervalTip();
                    }, 1000);
                },
                //注册账号
                register() {
                    var self = this;
                    self.loging = true;
                    if (self.formData.email == '') {
                        self.loging = false;
                        showMessage(self, '提示：注册邮箱为空.', true, 'warning');
                        return;
                    }
                    if (self.formData.password == '') {
                        self.loging = false;
                        showMessage(self, '提示：注册密码为空.', true, 'warning');
                        return;
                    }
                    if (self.formData.code == '') {
                        self.loging = false;
                        showMessage(self, '提示：验证码为空.', true, 'warning');
                        return;
                    }
                    Axios.post(self, '/main/register', {
                        data: {
                            email: self.formData.email,
                            password: self.formData.password,
                            code: self.formData.code
                        },
                        success(res) {
                            showMessage(self, res.msg, true);
                            setTimeout(function () {
                                window.location.href = '/main/login';
                            }, 1500);
                        },
                        error(res) {
                            showMessage(self, res.msg);
                        }
                    });
                    self.loging = false;
                }
            }
        });
    </script>
}